<template>
  <div class="profile-container">
    <div class="profile-card">
      <h3>个人信息</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ userInfo.registerDate }}</el-descriptions-item>
        <el-descriptions-item label="学习课程">{{ userInfo.courses }}</el-descriptions-item>
        <el-descriptions-item label="账户状态">
          <el-tag type="success">正常</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <div class="profile-actions">
        <el-button type="primary" @click="editProfile">编辑资料</el-button>
        <el-button type="warning" @click="changePassword">修改密码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      userInfo: {
        username: '',
        registerDate: '',
        courses: ''
      }
    }
  },
  created() {
    const user = JSON.parse(localStorage.getItem('user') || '{}')
    this.userInfo = {
      username: user.username || '游客',
      registerDate: '2023-01-01',
      courses: 'Vue.js入门课程, Element UI实战'
    }
  },
  methods: {
    editProfile() {
      this.$message.info('编辑资料功能开发中...')
    },
    changePassword() {
      this.$message.info('修改密码功能开发中...')
    }
  }
}
</script>

<style scoped>
.profile-container {
  height: 100%;
  padding: 20px;
}

.profile-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.profile-card h3 {
  margin-bottom: 20px;
  color: #303133;
  font-size: 20px;
}

.profile-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style>